<template>
  <div class="tsp-node">
    <el-form label-position="top" :rules="rules" label-width="80px" :model="formData" ref='nodeForm'>
      <!-- <el-form-item label="选择服务" prop="serviceKey">
        <el-cascader v-model="formData.serviceKey" :options="options" @change="handleChange" :show-all-levels='false' class="service-cascader" filterable></el-cascader>
      </el-form-item> -->
      <div v-for='(item, index) in formData.inputParams' :key="item.paramKey">
        <div class="params-item">
          <el-form-item v-if="item.options" :label='item.paramName' :prop="`inputParams[${index}].value`" :rules="rules.select" class="params-item-form">
            <el-select v-model="item.value" placeholder="请选择">
              <el-option v-for="option in item.options" :key="option.key" :label="option.name" :value="option.key">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item v-else-if="item.category === 'String'" :label='item.paramName' :prop="`inputParams[${index}].value`" :rules="rules.input" class="params-item-form">
            <el-input v-model="item.value" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item v-else :label='item.paramName' :prop="`inputParams[${index}].value`" :rules="rules.input" class="params-item-form">
            <el-input-number v-model="item.value" :min="item.min" :max='item.max' :precision="item.category === 'Integer' ? 0 : undefined" placeholder="请输入" :controls='false' class="input-number"></el-input-number>
          </el-form-item>
          <div class="tool-bar">
            <svg-icon :icon-class="`参数${item.openParam.isOpen ? '已' : '未'}开放`" :className="`${item.openParam.isOpen} signal-open`" @click="paramOpen(item)"/>
          </div>
        </div>
        <ParamOpen :show.sync='item.showParamOpen' :openParam.sync='item.openParam' :signalItem='item' ref='paramOpen'></ParamOpen>
      </div>
    </el-form>
  </div>
</template>

<script>
import TspNodeApi from '@/api/ruleNode/tspNode'
import { deepClone } from '@/utils/helper/jsUtil'
import RuleNodeBaseClass from '@/components/ruleNode/RuleNodeBaseClass'
import ParamOpen from './components/paramOpen.vue'
import { adapterServiceItemData, generatorTreeSelectData } from './tspNode.util'

export default {
  name: 'TspLibTspNode',
  mixins: [RuleNodeBaseClass],
  components: {
    ParamOpen
  },
  props: {
  },
  data() {
    return {
      formData: {
        serviceKey: '',
        inputParams: [],
        metaModelId: '',
        serviceName: ''
      },
      options: [],
      serviceItem: {
        inputData: []
      },
      tempItem: {},
      showPic: false,
      rules: {
        serviceKey: [{ required: true, message: '请选择', trigger: 'change' }],
        select: [{ required: true, message: ' ', trigger: 'change' }],
        input: [{ required: true, message: ' ', trigger: 'blur' }]
      }
    }
  },
  mounted() {
  },
  methods: {
    async getTspServices() {
      const { getTspServices } = TspNodeApi
      const res = await getTspServices()
      this.serviceListData = res.data
      this.options = res.data.options
    },
    handleChange(serviceKey) {
      serviceKey && this.getServiceItem(serviceKey)
    },
    getServiceItem(serviceKey) {
      const serviceItem = this.serviceListData.services.find(el => el.identifier === serviceKey.at(-1))
      serviceItem && (this.formData.inputParams = adapterServiceItemData(serviceItem))
      this.formData.metaModelId = serviceItem.id
      this.formData.serviceName = serviceItem.name
    },
    async initValue() {
      const initFormData = this.initialForm ? deepClone(this.initialForm) : {}
      await this.getTspServices()
      // TSP服务与生态服务不同 ，以serviceKey作为唯一标识，而非metaModelId
      if (initFormData.serviceKey) {
        initFormData.serviceKey = generatorTreeSelectData(this.options, initFormData.serviceKey)
        this.getServiceItem(initFormData.serviceKey)
      }
      const serviceItem = this.serviceListData.services.find(el => el.identifier === initFormData.serviceKey.at(-1))
      this.formData.serviceKey = initFormData.serviceKey
      const row = serviceItem.inputData
      if (initFormData.inputParams?.length) {
        this.formData.inputParams = this.initialForm.inputParams.map((item, index) => {
          return {
            paramName: item.paramName,
            paramKey: item.paramKey,
            category: row[index].category,
            options: row[index]?.memberList?.specs,
            min: row[index].spec.min ? row[index].spec.min - 0 : -Infinity,
            max: row[index].spec.max ? row[index].spec.max - 0 : Infinity,
            showParamOpen: false,
            openParam: { ...item.openParam },
            value: item.value
          }
        })
      }
    },
    paramOpen(item) {
      item.showParamOpen = !item.showParamOpen
      if (!item.showParamOpen) {
        this.$refs.paramOpen[0].resetForm()
      }
    },
    getFormData() {
      const data = deepClone(this.formData)
      data.serviceKey = data.serviceKey.at(-1)
      data.inputParams.forEach(param => {
        delete param.options
        delete param.category
        delete param.showParamOpen
      })
      return data
    },
    validateForm() {
      let isValid
      this.$refs.nodeForm.validate(valid => { isValid = valid })
      return isValid
    }
  }
}
</script>

<style lang="scss" scoped>

.tsp-node {
  .service-cascader{
    display: block;
  }
}
</style>
<style lang="scss">
.tsp-node{
  .input-number{
    width: 100%;
    .el-input__inner{
      text-align: left;
    }
  }
  .params-item{
    display: flex;
    align-items: flex-end;
    .params-item-form{
      flex: 1 0 auto;
      margin-bottom: 8px;
    }
    .tool-bar {
      margin: 0 0 8px 22px;
      .signal-open{
        width: 16px;
        height: 32px;
        cursor: pointer;
        margin-left: 24px;
        margin-right: 2px;
        &:nth-child(1) {
          margin-left: 0;
        }
        &.true{
          width: 18px;
          margin-right: 0;
        }
      }
    }
  }
}
</style>
